<!DOCTYPE html>
<html>
<head>
<title>Charged Rod Diagram</title>
<style>
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
  }
  canvas {
    border: 1px solid #ccc;
    background-color: #fff;
  }
</style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="400"></canvas>
<script>
  const canvas = document.getElementById('physicsCanvas');
  const ctx = canvas.getContext('2d');

  // Parameters for drawing
  const centerX = 300;
  const centerY = 180;
  const rodLength = 320;
  const rodHeight = 12;

  // Coordinates
  const rodLeftX = centerX - rodLength / 2;
  const rodRightX = centerX + rodLength / 2;
  const rodTopY = centerY - rodHeight / 2;
  const rodBottomY = centerY + rodHeight / 2;

  const pointP_X = rodRightX + 100;
  const pointP_Y = centerY;

  const pointP_prime_X = centerX;
  const pointP_prime_Y = centerY - 120;
  
  // Clear canvas
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Set styles
  ctx.strokeStyle = 'black';
  ctx.fillStyle = 'black';
  ctx.lineWidth = 1.5;
  ctx.font = 'italic 20px Times New Roman';
  
  // Draw the rod (AB)
  ctx.strokeRect(rodLeftX, rodTopY, rodLength, rodHeight);

  // Draw the extension line to P
  ctx.beginPath();
  ctx.moveTo(rodRightX, centerY);
  ctx.lineTo(pointP_X, pointP_Y);
  ctx.stroke();

  // Draw the dashed line to P'
  ctx.beginPath();
  ctx.setLineDash([6, 4]);
  ctx.moveTo(pointP_prime_X, rodTopY);
  ctx.lineTo(pointP_prime_X, pointP_prime_Y);
  ctx.stroke();
  ctx.setLineDash([]); // Reset to solid line

  // Draw points P and P'
  ctx.beginPath();
  ctx.arc(pointP_X, pointP_Y, 3, 0, 2 * Math.PI);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(pointP_prime_X, pointP_prime_Y, 3, 0, 2 * Math.PI);
  ctx.fill();
  
  // Draw the dimension line for length 'l'
  const dimLineY = rodBottomY + 50;
  const tickHeight = 6;

  ctx.beginPath();
  ctx.moveTo(rodLeftX, dimLineY);
  ctx.lineTo(rodRightX, dimLineY);
  ctx.stroke();

  // Ticks for the dimension line
  ctx.beginPath();
  ctx.moveTo(rodLeftX, dimLineY - tickHeight);
  ctx.lineTo(rodLeftX, dimLineY + tickHeight);
  ctx.stroke();

  ctx.beginPath();
  ctx.moveTo(rodRightX, dimLineY - tickHeight);
  ctx.lineTo(rodRightX, dimLineY + tickHeight);
  ctx.stroke();

  // Add labels
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';
  
  // Label A
  ctx.fillText('A', rodLeftX - 20, centerY);
  
  // Label B
  ctx.fillText('B', rodRightX, rodTopY - 15);

  // Label O
  ctx.fillText('O', centerX, rodBottomY + 15);
  
  // Label P
  ctx.fillText('P', pointP_X + 20, pointP_Y);
  
  // Label P'
  ctx.fillText("P'", pointP_prime_X + 20, pointP_prime_Y);
  
  // Label l
  ctx.fillText('l', centerX, dimLineY + 20);

  // Add caption text
  ctx.font = '20px KaiTi'; // Use a font that supports Chinese characters
  ctx.fillText('习题 7-29 图', centerX, canvas.height - 30);

</script>
</body>
</html>